<!-- 搜索结果 -->
<template>
  <div>
    <!-- 头部 -->
    <!-- 搜索结果页面头部 -->
    <div class="search-header">
      <van-nav-bar title="搜索结果" left-arrow placeholder fixed>
        <!-- 后退按钮 -->
        <template #left>
          <van-icon
            name="arrow-left"
            size="0.48rem"
            @click="$router.back()"
            color="white"
          />
        </template>
      </van-nav-bar>
      <!-- 搜索组件 -->
    </div>
    <!-- 使用列表实现上拉加载更多 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <!-- 文章列表 -->
      <articleitem
        v-for="(item, index) in articleList"
        :key="index"
        :articleObj="item"
        :isShow ='false'
        @click.native="getArticle(item.art_id)"
      ></articleitem>
    </van-list>
  </div>
</template>

<script>
import { getSearchApi } from '@/api'
import articleitem from '@/components/articleItem.vue'
// 图片防盗链 原因:http请求头中有一个referrer字段，用来表示发起http请求的源地址信息,
// 服务器端在拿到这个referrer值后判断请求是否来自本站
// 解决方案:在前端可以通过meta来设置referrer policy(来源策略)，referrer设置成`no-referrer`，发送请求不会带上referrer信息，对方服务器也就无法拦截了
// <meta name="referrer" content="no-referrer" />
// 缺陷:如果后端做了其他判断, 我们依旧拿不到此图片
export default {
  name: 'Search',
  data () {
    return {
      articleList: [],
      loading: false,
      finished: false,
      page: 1,
      id: ''
    }
  },
  components: {
    articleitem
  },
  async created () {
    // 需要传一个值,搜索的关键字
    this.id = this.$route.params.keyword
    const res = await getSearchApi({ q: this.id })
    // 把获取的数组拿出
    this.articleList = res.data.data.results
  },
  methods: {
    async onLoad () {
      if (this.articleList.length > 0) {
        this.page++
        const res = await getSearchApi({ page: this.page, q: this.id })
        this.articleList = [...this.articleList, ...res.data.data.results]
        if (res.data.data.results.length === 0) this.finished = true
        this.loading = false
      }
    },
    getArticle (val) {
      this.$router.push({
        path: '/articledetail',
        query: {
          value: val
        }
      })
    }
  }
}
</script>

<style>
</style>
